<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      padding: 50px;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="table-responsive container">
    <table class="table table-bordered  table-hover" id="table">
      <tr>
        <th class="col-md-1">序号</th>
        <th class="col-md-1">题目</th>
        <th class="col-md-3">内容</th>
        <th class="col-md-1">作者</th>
      </tr>
    </table>
  </div>
  <script src="data.js"></script>
  <script>
    var table = document.getElementById('table');
    var tbody = table.getElementsByTagName('tbody')[0];
    jsonData = JSON.parse(data);//查看data.js，其中变量data模拟了网络传输所接收到的json数据，然后通过parse方法反序列化为JS对象，再进行页面节点渲染
    console.log(jsonData);

    jsonData.forEach(function (item, index) {
      
      var html =
        '<tr>' +
          '<th class="col-md-1">' + (index + 1) + '</th>' +
          '<th class="col-md-1">' + item.title + '</th>' +
          '<th class="col-md-3">' + item.content.replace(/\|/g, "<br>") + '</th>' +
          '<th class="col-md-1">' + item.authors + '</th>' +
        '</tr>';
        
        tbody.innerHTML+=html;

    })


    // for (var i = 0; i < jsonData.length; i++) {
    //   var tr = table.insertRow();

    //   td = tr.insertCell();
    //   td.innerHTML = i + 1;

    //   td = tr.insertCell();
    //   td.innerHTML = jsonData[i].title;

    //   td = tr.insertCell();
    //   td.innerHTML = jsonData[i].content.replace(/\|/g, "<br/>");

    //   td = tr.insertCell();
    //   td.innerHTML = jsonData[i].authors;
    // }
  </script>
</body>

</html>